<template>
    <div class="common-layout">
        <el-container class="common-layout-container">
            <el-aside width="200px" class="common-layout-aside">
                <el-menu :default-active="pathDefault.split('/')[1]" unique-opened router background-color="#545c64"
                    text-color="#fff" active-text-color="#ffd04b" class="el-menu-vertical-demo">
                    <Menu :menu-list="menuList" />
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="common-layout-header">Header</el-header>
                <el-main class="common-layout-main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { getMenu } from '../../apis';
import { onMounted, reactive, ref } from 'vue';
import { MenuItemOld } from '../../apis/menu/menu';
import { useRoute } from 'vue-router';
const route = useRoute();
const menuList = reactive<MenuItemOld[]>([]);
const pathDefault = ref('');
onMounted(async () => {
    pathDefault.value = route.path;
    const res = await getMenu();
    menuList.push(...res.data);
});



</script>

<style scoped lang="scss">
.common-layout {
    width: 100vw;
    height: 100vh;
}

.common-layout-container {
    width: 100%;
    height: 100%;
}

.common-layout-aside {
    background-color: #545c64;
}

.common-layout-header {
    background-color: #fff;
}

.common-layout-main {
    background-color: #f0f2f5;
}
</style>